import React, { Component } from 'react'
import styles from './Login.module.css'

export default class Login extends Component {
  state = {
    username: '',
    password: ''
  }

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  login = () => {
    const { username, password } = this.state
    if (username === 'admin' && password === '123') {
      if (this.props.location.search) {
        const redirects = this.props.location.search.split('?')
        const redirect = redirects[1].split('=')[1] + '?' + redirects[2]

        this.props.history.push(redirect)
      } else {
        this.props.history.push('/layout')
      }
      localStorage.setItem('token', 'wewrdwef')
    } else {
      alert('用户名或密码有误')
    }
  }
  render () {
    const { password, username } = this.state

    return (
      <div className={styles['login-container']}>
        <p>
          用户名:
          <input value={username} name='username' onChange={this.change} />
        </p>
        <p>
          密码:
          <input value={password} name='password' onChange={this.change} />
        </p>
        <p>
          <button onClick={this.login}>登录</button>
        </p>
      </div>
    )
  }
}
